<template>
    <div class="help-center">
        <form @submit="submit($event)" class="help-center-search">
            <UserSearchName shape="solid" v-model="search" placeholder="Search for answers" @change="submit($event)" />
        </form>

        <div class="help-center-loading" v-if="loading">
            <p v-loading="loading"></p>
        </div>

        <div class="help-center-warp" v-else>
            <aside class="help-center-nav" :class="{ active: tabsOpen }">
                <div class="help-center-nav-wap" @click="tabsOpen = !tabsOpen"></div>
                <cite>
                    <h2 v-for="item in classifyGroup" :key="item.id" :class="{ active: item.id == form.classify }">
                        <a :href="'?classify=' + item.id" @click="openTabs(item, $event)">
                            <strong v-text="item.name"></strong>
                            <span class="help-center-nav-count" v-text="item.list.length"></span>
                        </a>
                    </h2>
                </cite>

            </aside>

            <!-- 详情页 -->
            <article class="help-center-article" v-if="form.detail">
                <div class="help-center-article-body" v-if="articleCurrent.title || articleCurrent.content">
                    <a @click="routeTo($event, { detail: 0 })">Back to previous</a>
                    <h1 v-html="getFormatText(articleCurrent.title)"></h1>
                    <div class="help-center-content" v-html="getFormatText(articleCurrent.content)"></div>
                </div>
                <div class="help-center-nodata" v-else>
                    <i class="iconfont icon-xiangqing1"></i>
                    <p>Sorry, no results found. Please try another way, or contact us for help.</p>
                </div>
            </article>

            <!-- 列表页 -->
            <section class="help-center-classify" v-else>
                <div class="help-center-nodata" v-if="classifyCurrent.list.length == 0">
                    <i class="iconfont icon-xiangqing1"></i>
                    <p>Sorry, no results found. Please try another way, or contact us for help.</p>
                </div>

                <div class="help-center-classify-body" v-else>
                    <ul>
                        <li v-for="item in classifyCurrent.list" :key="item.id">
                            <a :href="getDetailLink(item)" @click="routeTo($event, { detail: item.id })">
                                <h3 v-html="getFormatText(item.title)"></h3>
                                <blockquote v-html="getFormatText(item.content)"></blockquote>
                            </a>
                        </li>
                    </ul>

                    <CommonPage v-show="classifyCurrent.total > form.page_size" :total="classifyCurrent.total"
                        :current-page.sync="form.page_num" :page-size="form.page_size" @current-change="changePage">
                    </CommonPage>
                </div>
            </section>
        </div>
    </div>
</template>
<script>
import { HELPCENTER } from "@/utils/SeoConfig"
export default {
    name: "help-center",
    head ({ $store }) {
        return {
            title: HELPCENTER.title,
            meta: [
                { name: "keywords", content: HELPCENTER.keywords },
                { name: "description", content: HELPCENTER.description },
            ],
        };
    },
    async asyncData ({ app, route }) {
        let query = route.query || {};
        let promises = [];
        let classifyList = [];

        if (process.client) {
            classifyList = window.CACHE_HELP_CENTER || [];
        } else {
            let response = await app.$http("Help.getList", { page_size: 999 });
            if (response.code == 0) {
                classifyList = response.data || [];
                classifyList.sort((a, b) => b.sort - a.sort); // 排序
            }
        }

        classifyList.map((item) => {
            // 第一行空行的去掉
            item.content = item.content.replace(/^(<p><br><\/p>)*/, "");
        });

        return {
            loading: false,
            search: query.keyword || "",
            classifyList: classifyList, // 分类列表
            tabsOpen: false,
            form: {
                classify: parseInt(query.classify) || 0, // 分类id
                detail: parseInt(query.detail) || 0, // 文章id
                keyword: query.keyword || "", // 搜索关键字
                page_num: parseInt(query.page) || 1, // 分页
                page_size: 10, // 每页数量
            },
        };
    },
    computed: {
        // 分组信息
        classifyGroup () {
            let names = {
                1: "Basics",
                2: "ECommerce integrations",
                3: "Design & mockups",
                4: "Product management",
                5: "Printing facts",
                10: "Embroidery",
                6: "Orders & fulfillment",
                7: "Billing & payment",
                8: "Shipping",
                9: "After-sales support",
            };
            let object = {};
            let list = this.classifyList || [];
            list.map((item) => {
                let classify = item.classify_name;
                if (object[classify]) {
                    object[classify].list.push(item);
                } else {
                    object[classify] = {
                        id: classify,
                        name: names[classify] || "",
                        list: [item],
                    };
                }
            });

            return Object.keys(object).map((key) => {
                let item = object[key];
                item.list.sort((a, b) => a.sort - b.sort);
                return item;
            });
        },

        // 当前分组
        classifyCurrent () {
            let list = [];
            if (this.form.keyword) {
                // 有搜索
                let keyword = (this.form.keyword || "").trim().toUpperCase(); //字符串去除两端空格转为大写
                let titleArr = []; //标题数组
                let contentArr = []; //内容数组
                //按照匹配排序
                // titleArr = this.classifyList.filter((i) => reg.test(i.title)); //正则有问题
                // contentArr = this.classifyList.filter((i) => reg.test(i.content));
                //筛选匹配项
                this.classifyList.map((i) => {
                    let title = i.title.toUpperCase()
                    let content = i.content.toUpperCase()
                    if (title.indexOf(keyword) != -1) {
                        titleArr.push(i);
                    }
                    if (content.indexOf(keyword) != -1) {
                        contentArr.push(i);
                    }
                });
                list = [...titleArr, ...contentArr];
                list = Array.from(new Set(list));
            } else if (this.form.detail) {
                // 当前打开详情
                list = [];
            } else if (this.form.classify) {
                // 有分类
                let active =
                    this.classifyGroup.filter(
                        (i) => i.id == this.form.classify
                    )[0] || {};
                list = active.list || [];
            } else {
                list = this.classifyList.slice(0);
            }

            // 开始下标
            let start =
                Math.max(0, this.form.page_num - 1) * this.form.page_size;
            let toend = start + this.form.page_size;

            return {
                total: list.length,
                list: list.slice(start, toend),
            };
        },

        // 当前文章
        articleCurrent () {
            if (this.form.detail) {
                let detail = this.classifyList.filter(
                    (i) => i.id == this.form.detail
                )[0];
                return detail || {};
            } else {
                return {};
            }
        },

        keyword: {
            get (val) {
                return this.form.keyword;
            },
            set (val) {
                if (val != this.form.keyword) {
                    this.form.keyword = val;
                    this.form.page_num = 1;
                }
            },
        },
    },

    watch: {
        "$route.query" () {
            this.form.classify = parseInt(this.$route.query.classify) || 0; // 分类id
            this.form.detail = parseInt(this.$route.query.detail) || 0; // 文章id
            this.form.keyword = this.$route.query.keyword || ""; // 搜索关键字
            this.search = this.form.keyword || "";
            this.form.page_num = parseInt(this.$route.query.page) || 1; // 分页
        },
    },

    methods: {
        getDetailLink (item) {
            if (this.form.classify) {
                return "?classify=" + this.form.classify + "&detail=" + item.id;
            } else {
                return "?detail=" + item.id;
            }
        },

        openTabs (item, event) {
            this.routeTo(event, { classify: item.id })
            this.tabsOpen = false;
        },
        getFormatText (text) {
            //赋值title
            // list.map((item) => {
            //     if (this.form.keyword) {
            //         item.show_title = item.title.replace(
            //             reg,
            //             (str) => "<em>" + str + "</em>"
            //         );
            //     } else {
            //         item.show_title = item.title;
            //     }
            // });
            // image去掉
            // item.content = item.content.replace(/<p><img.*<\/p>/g, "");
            if (this.form.keyword) {
                // 有搜索
                let keyword = (this.form.keyword || "").trim(); //字符串去除两端空格
                var reg = new RegExp(keyword, "ig");
                let res = text;
                // 纯字符串的
                res = res.replace(/^([^<]+)/g, (str) => str.replace(reg, a => "<em>" + a + "</em>"));
                // 标签内的
                res = res.replace(/(?:>)([^<]+)/gi, (str) => str.replace(reg, a => "<em>" + a + "</em>"))


                return res;
            } else {
                return text;
            }
        },

        // 修改参数
        routeTo (event, item) {
            event.stopPropagation();
            event.preventDefault();

            if (item.detail !== undefined) {
                // 进入详情
                this.form.detail = item.detail;
                // this.form.keyword = "";
                this.chageRoute();
            } else if (item.classify !== undefined) {
                // 进入分组
                this.form.classify = item.classify;
                this.form.detail = 0;
                this.form.keyword = "";
                this.form.page_num = 1;
                this.chageRoute();
            }
        },

        // 改变分页
        changePage (page) {
            this.form.page_num = page;
            this.chageRoute();
        },

        // 搜索
        submit (event) {
            try {
                event.stopPropagation();
                event.preventDefault();
            } catch (error) { }

            this.form.keyword = this.search;
            this.form.detail = 0;
            // this.form.classify = 0;
            this.form.page_num = 1;
            this.chageRoute();
        },

        // 改变路由
        chageRoute () {
            let form = {};
            let route = this.$route.query || {};
            let query = {};

            this.form.keyword && (form.keyword = this.form.keyword);
            this.form.classify &&
                (form.classify = parseInt(this.form.classify));
            this.form.detail && (form.detail = parseInt(this.form.detail));
            this.form.page_num > 1 &&
                (form.page = parseInt(this.form.page_num));
            this.search = this.form.keyword || "";

            route.keyword && (query.keyword = route.keyword); // 搜索关键字
            route.classify && (query.classify = parseInt(route.classify)); // 分类id
            route.detail && (query.detail = parseInt(route.detail)); // 文章id
            route.page > 1 && (query.page_num = parseInt(route.page)); // 分页

            if (JSON.stringify(query) == JSON.stringify(form)) {
                // 相同不更新
            } else if (form.detail) {
                this.$router.push({ path: this.$route.path, query: form });
                setTimeout(() => window && window.scrollTo(0, 0), 0);
            } else {
                this.$router.replace({ path: this.$route.path, query: form });
            }
        },

        // 请求数据
        async getData () {
            this.loading = true;

            let response = await this.$http("Help.getList", { page_size: 999 });
            if (response.code == 0) {
                let classifyList = response.data || [];
                classifyList.sort((a, b) => a.sort - b.sort); // 排序
                this.classifyList = classifyList;
                this.loading = false;
                window.CACHE_HELP_CENTER = this.classifyList;
            } else {
                this.loading = false;
                this.$uxMessage.warning(response.msg || 'error')
            }
        },
    },

    created () {
        if (process.client) {
            if ((this.classifyList.length || []) > 0) {
                window.CACHE_HELP_CENTER = this.classifyList;
            } else {
                this.getData();
            }
        }
    },
};
</script>
<style lang="scss" scoped>
.help-center {
    --searchTextColor: #ea4c89;
    display: flex;
    flex-direction: column;
    background: #f0f0f0;
    align-items: center;
    width: 100%;
    padding: 0 20px;
    align-items: center;
}

.help-center-search {
    width: 100%;
    margin: 32px auto;
    max-width: 600px;
    text-align: center;
    display: flex;
    min-height: 40px;
    position: relative;

    &::v-deep {
        .user-search-name {
            max-width: 100%;

            & input {
                background: #FFFFFF !important;
                border-radius: 20px;
            }
        }
    }
}

.help-center-loading {
    width: 100%;
    max-width: 1100px;
    position: relative;
    margin: 0 auto 32px;
    display: flex;
    flex: 1;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;

    p {
        width: 100%;
    }

    &::v-deep .el-loading-mask {
        z-index: 0;
    }
}

.help-center-warp {
    width: 100%;
    max-width: 1200px;
    position: relative;
    margin: 0 auto 32px;
    display: flex;
    flex: 1;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}

.help-center-nav-wap {
    display: none;
}

.help-center-nav {
    width: 280px;
    position: relative;
    padding: 60px 26px;
    box-sizing: border-box;

    &:after {
        content: '';
        display: block;
        width: 6px;
        height: 100%;
        background: linear-gradient(270deg, transparent, rgba(0, 0, 0, 0.08));
        position: absolute;
        left: 100%;
        top: 0;
        z-index: 1;
    }

    h2 {
        display: block;
        height: 18px;
        font-size: 16px;
        font-family: Roboto;
        color: #000000;
        line-height: 18px;
        margin-bottom: 18px;
        white-space: nowrap;
        cursor: pointer;
        font-weight: normal;

        a {
            display: block;
            color: #000000;
        }

        strong {
            font-weight: normal;
        }

        .help-center-nav-count {
            position: relative;
            display: inline-block;
            padding: 4px 6px;
            font-size: 12px;
            color: #292929;
            line-height: 12px;
            border-radius: 10px;
            border: 1px solid #E6E6E6;
        }

        &:hover,
        &.active {
            color: #ea4c89;

            a {
                color: #ea4c89;
            }

            .help-center-nav-count {
                color: #ea4c89;
                border-color: #F6B2CD;
            }
        }

        &.active {
            font-family: Roboto-Medium;
        }
    }
}

.help-center-classify {
    font-family: Roboto;
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 30px 48px;

    ul {
        flex: 1;
    }

    a {
        display: block;
        color: inherit;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        &:hover {
            color: #ea4c89;

            h3 {
                color: #ea4c89;
            }

            blockquote {
                color: #ea4c89;
            }
        }
    }

    li {
        padding: 26px 0;
        border-bottom: 1px solid #dcdcdc;

        h3 {
            font-family: Roboto-Medium;
            font-size: 18px;

            font-weight: normal;
            color: #000000;
            line-height: 28px;
            font-weight: normal;

            &::v-deep>em {
                color: var(--searchTextColor);
                font-weight: 600;
            }
        }

        blockquote {
            display: block;
            margin: 3px 0 0;
            padding: 0;
            font-size: 16px;

            color: #555555;
            line-height: 18px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            height: 20px;

            &::v-deep * {
                display: inline;
            }

            &::v-deep br {
                display: none;
            }

            &::v-deep em {
                color: var(--searchTextColor);
                font-weight: 600;
            }

            &::v-deep {
                img {
                    display: none;
                }
            }
        }
    }

    .common-page {
        margin-top: 32px;
        justify-content: end;
    }
}

.help-center-article {
    flex: 1;
    position: relative;
    background: #fff;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 36px 48px;
    align-items: self-start;

    &>a {
        cursor: pointer;
        font-size: 14px;
        color: #555;
        text-decoration: underline;

        &:hover {
            color: #ea4c89;
        }
    }

    a:hover {
        cursor: pointer;
    }

    h1 {
        font-size: 36px;
        font-weight: 800;
        color: #000;
        margin-top: 24px;

        &::v-deep em {
            color: var(--searchTextColor);
            font-weight: 600;
        }
    }

    .help-center-content {
        max-width: 100%;
        width: 100%;
        margin-top: 24px;
        font-size: 18px;
        color: #000000;
        line-height: 32px;

        &::v-deep {

            img,
            video,
            iframe {
                max-width: 100% !important;
            }
        }

        &::v-deep em {
            color: var(--searchTextColor);
            font-weight: 600;
        }
    }
}

.help-center-nodata {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    i {
        font-size: 64px;
        height: 64px;
        width: 64px;
        color: #f2f2f2;
    }

    p {
        margin: 32px 0 0 0;
        font-size: 16px;

        color: #000000;
    }
}

@media (max-width: 960px) {
    .help-center {
        padding: 0 14px;
        box-sizing: border-box;
    }

    .help-center-search {
        margin: 16px auto;

        label input {
            text-indent: 4px;
        }

        button {
            display: block;
            right: 4px;
            padding: 8px;
        }

        button svg {
            width: 24px;
            height: 24px;
        }
    }

    .help-center-warp {
        flex-direction: column;
        margin: 0 auto 14px;
    }

    .help-center-nav {
        width: auto;
        padding: 0;
        position: relative;
        height: 40px;
        background: #ffffff;
        margin: 12px;

        &::before {
            content: 'All';
            position: absolute;
            left: 0;
            top: 0;
            line-height: 40px;
            left: 12px;
            font-size: 16px;
        }

        .help-center-nav-wap {
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            border: 1px solid #c6c6c6;
            border-radius: 6px;
            box-sizing: border-box;

            &::before {
                content: '';
                position: absolute;
                right: 14px;
                top: 50%;
                transform: translateY(-50%) rotate(135deg);
                transition: transform 0.2s;
                width: 6px;
                height: 6px;
                border-right: 2px solid #000;
                border-top: 2px solid #000;
            }
        }

        &>cite {
            position: absolute;
            left: 0;
            top: 100%;
            width: 100%;
            flex-direction: column;
            align-items: initial;
            background-color: #fff;
            margin: 4px 0 0;
            box-sizing: border-box;
            border: 1px solid transparent;

            h2 {
                background: none;
                height: 52px;
                display: none;
                box-sizing: border-box;
                padding: 0 8px;
                width: 100%;
                line-height: 52px;
                justify-content: flex-start;
                border: none;
                margin: 0;

                a {
                    display: block;
                    width: 100%;
                }

                &.active {
                    position: absolute;
                    left: 0;
                    top: -44px;
                    width: 100%;
                    display: flex;
                    background: #fff;
                    color: #000;
                    border-radius: 6px;
                    line-height: 40px;
                    height: 40px;

                    a {
                        color: #000;
                    }
                }
            }
        }

        &.active {
            .help-center-nav-wap:before {
                transform: translateY(-50%) rotate(-45deg);
            }

            cite {
                z-index: 1;
                border: 1px solid #c6c6c6;
                border-radius: 6px;

                h2 {
                    display: flex;
                }
            }
        }

        &::after {
            display: none;
        }
    }

    .help-center-classify {
        padding: 0 12px;

        li {
            padding: 12px 0;

            h3 {
                font-size: 16px;
                font-weight: 400;
                color: #000000;
                line-height: 18px;
            }

            blockquote {
                font-size: 14px;
                font-weight: 400;
                color: #555555;
                line-height: 16px;
            }
        }

        .common-page {
            margin: 32px 0;
            justify-content: center;
        }
    }

    .help-center-article {
        padding: 12px;

        h1 {
            font-size: 18px;
            line-height: 22px;
        }

        .help-center-article-body>a {
            text-decoration: underline;
            font-size: 14px;
        }

        .help-center-content {
            font-size: 14px;
            font-weight: 400;
            color: #555555;
            line-height: 22px;
        }
    }
}
</style>
